<template>
	<div class="lc_wrap">
		<el-row class="waterQuaAssessment">
			<el-col :span="leftWidth">
				<div class="box treeBox">
					<basic-container>
						<avue-tree ref="tree" :data="treeData" :option="treeOption" @node-click="nodeClick" />
					</basic-container>
				</div>
			</el-col>
			<el-col :span="rightWidth" class="table-wrapper">
				<overlay @changeTreeBox="changeTreeBox"></overlay>
				<basic-container>
					<div class="search-tools">
						<div class="search-left">
							<!-- 时 -->
							<div v-if="dateType==1">
								<el-date-picker v-model="dateTime" type="date" size="small" value-format="yyyy-MM-dd" :picker-options="pickerOption" placeholder="选择日期" :clearable='false'></el-date-picker>
								<el-time-select v-model="hourTime" size="small" placeholder="选择时间" :picker-options="{
                                    start: '00:00',
                                    step: '01:00',
                                    end: '23:00'
                                }" :clearable="false" style="margin-left:10px"></el-time-select>
							</div>
							<!-- 日 -->
							<div v-if="dateType==2">
								<el-date-picker v-model="dateTime" type="date" size="small" value-format="yyyy-MM-dd" :picker-options="pickerOption" placeholder="选择日期" :clearable='false'></el-date-picker>
							</div>
							<!-- 周 -->
							<div v-if="dateType==3">
								<el-date-picker v-model="dateTime" type="week" size="small" format="yyyy 第 WW 周" value-format="yyyy-MM-dd" :picker-options="pickerOption" placeholder="选择周" :clearable='false'></el-date-picker>
							</div>
							<!-- 月 -->
							<div v-if="dateType==4">
								<el-date-picker v-model="dateTime" type="month" size="small" value-format="yyyy-MM" :picker-options="pickerOption" placeholder="选择月份" :clearable='false'></el-date-picker>
							</div>
							<!-- 年 -->
							<div v-if="dateType==5">
								<el-date-picker v-model="dateTime" type="year" size="small" value-format="yyyy" :picker-options="pickerOption" placeholder="选择年份" :clearable='false'></el-date-picker>
							</div>
						</div>
						<div class="search-right">
							<div class="search-tabs">
								<el-radio v-model="dateType" v-for="(item, index) in dateTypeList" :key="index" :label="item.id" :disabled="item.disable">{{ item.value }}
								</el-radio>
							</div>
							<div class="searcg-btns">
								<el-button type="primary" size="small" icon="el-icon-search" @click="search">搜 索</el-button>
							</div>
						</div>
					</div>
					<div class="div-wrapper">
						<div class="chartDiv">
							<e-chart autoresize :options="chartOptions" style="height:92%;"></e-chart>
						</div>
						<div class="tableDiv">
							<div class="tableTitle">水质评价结果<span class="tc_rule" @click="toRule">(评价规则)</span></div>
							<table>
								<tr v-for="(item,index) in echartList" :key="index">
									<td>{{ item.name }}</td>
									<td>{{ item.value }}</td>
								</tr>
							</table>
						</div>
						<el-dialog title="" :visible.sync="dialogVisiable" :modal="false" @close="beforeDialogClose">
							<img src="/img/bg/tc_rule2.png" alt="" style="width:100%">
						</el-dialog>
					</div>
				</basic-container>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import { getTypes, getChart, getDeptTree } from "@/api/swaq/waterQuaAnalysis";
	import { mapGetters } from "vuex";
	import { dateFormat } from "@/util/date";
	import overlay from "@/components/common/overlay.vue";
	export default {
		components: {
			overlay
		},
		data() {
			let _this = this
			return {
				dialogVisiable: false,
				chartOptions: {},
				leftWidth: this.$leftWidth,
				rightWidth: this.$rightWidth,
				loading: false,
				data: [],
				// 左侧树配置属性
				treeOption: {
					nodeKey: 'id',
					addBtn: false,
					menu: false,
					size: 'small',
					defaultExpandAll: true,
					props: {
						label: 'title',
						value: 'value',
						children: 'children'
					}
				},
				treeData: [],
				nodeId: null,
				deptInfoName: '',
				deptInfoId: '',
				dateType: 2, // 日期格式：日、月、年
				dateTime: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'), // 默认显示的日期
				hourTime: '00:00',
				dateTypeList: [{
						label: 2,
						value: '日'
					},
					{
						label: 4,
						value: '月'
					},
					{
						label: 5,
						value: '年'
					}
				],
				pickerOption: {
					firstDayOfWeek: 1,
					disabledDate(time) {
						return _this.dateType == 3 ? false : time.getTime() > Date.now()
					},
				},
				echartList: [],
				nodeType:null
			};
		},
		mounted() {
			this.initData()
		},
		watch: {
			dateType() {
				this.dateTime = dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss') // 默认显示的日期
			},
		},
		methods: {
			toRule() {
				this.dialogVisiable = true
			},
			getTypes() {
				getTypes().then(res => {
					this.dateTypeList = res.data.data;
					this.dateType = this.dateTypeList[0].id;
				})
			},
			changeTreeBox() {
				this.leftWidth = this.leftWidth == this.$leftWidth ? 0 : this.$leftWidth
				this.rightWidth = this.rightWidth == this.$rightWidth ? 24 : this.$rightWidth
			},
			// 搜索
			search() {
				this.onLoad()
			},
			/*** 树点击事件*/
			nodeClick(data) {
				this.nodeType=data.nodeType
				this.nodeId = data.key
				this.deptInfoName = data.title
				this.deptInfoId = data.key
				this.onLoad()
			},
			/*** 获取第一个最下层节点*/
			getFirstNode(tree, node = null) {
				tree.forEach(item => {
					if(!node) {
						if(item.children && item.children.length) {
							node = this.getFirstNode(item.children, node)
						} else {
							node = item
						}
					}
				})
				return node
			},
			/*** 初始化表单*/
			initData() {
				this.getTypes();
				// 树内容接口
				getDeptTree('1').then(res => {
					this.treeData = res.data.data
					this.$nextTick(function() {
						// 获取el-tree对象
						let elTreeDom = this.$refs.tree.$children[1]
						// 获取要设置的节点-第一个最下层节点,并设置默认选中
						let firstNode = this.getFirstNode(res.data.data)
						elTreeDom.setCurrentNode(firstNode)
						this.nodeClick(firstNode)
					})
				})
			},
			onLoad() {
				if(this.nodeId) {
					this.loading = true;
					let myDate = null
					switch(this.dateType) {
						case 1: // 时
							myDate = this.dateTime.slice(0, 10) + ' ' + this.hourTime.slice(0, 2)
							break;
						case 2: // 日
							myDate = this.dateTime.slice(0, 10)
							break;
						case 3: // 周
							myDate = this.dateTime.slice(0, 10)
							break;
						case 4: // 月
							myDate = this.dateTime.slice(0, 7)
							break;
						case 5: // 年
							myDate = this.dateTime.slice(0, 4)
							break;

						default:
							myDate = this.dateTime
							break;
					}
					getChart(this.nodeId, myDate, this.dateType,this.nodeType).then(res => {
						this.chartOptions = {
							grid: {
								left: '3%',
								right: '4%',
								bottom: '3%',
								containLabel: true
							},
							color: ['#BAE7FF', '#40A9FF', '#73D13D', '#FADB14', '#FA8C16', '#F5222D'],
							title: {
								text: '水质评价',
								left: 'center'
							},
							tooltip: {
								trigger: 'item',
								formatter: '{a} <br/>{b} : {c} ({d}%)'
							},
							legend: {
								left: 'center',
								top: 'bottom',
								data: ['I类', 'II类', 'III类', 'IV类', 'V类', '劣V类']
							},
							toolbox: {
								show: false,
								feature: {
									mark: {
										show: true
									},
									dataView: {
										show: true,
										readOnly: false
									},
									magicType: {
										show: true,
										type: ['pie', 'funnel']
									},
									restore: {
										show: true
									},
									saveAsImage: {
										show: true
									}
								}
							},
							series: [{
								name: '水质评价',
								type: 'pie',
								radius: [0, 150],
								center: ['50%', '50%'],
								// roseType: 'radius',
								label: {
									show: false
								},
								emphasis: {
									label: {
										show: true
									}
								},
								data: []
							}]
						}
						res.data.data.echart.map((item, ind) => {
							this.chartOptions.series[0].data.push({
								value: item.count,
								name: item.level
							})
						})

						this.echartList = res.data.data.echartList
					})
				}
			}
		}
	};
</script>
<style lang="scss">
	.waterQuaAssessment {
		.el-card__body {
			height: calc(100% - 35px);
			.avue-crud {
				height: calc(100% - 155px);
			}
		}
		.el-dialog__wrapper {
			background: rgba($color: #000000, $alpha: 0.5);
			.el-dialog {
				margin-top: 7vh !important
			}
		}
	}
</style>
<style lang="scss" scoped>
	.map {
		width: 100%;
		height: 500px;
	}
	
	.box {
		height: 100%;
		margin-bottom: 0;
	}
	
	.el-row {
		height: calc(100% - 20px);
	}
	
	.el-col {
		height: 100%;
		overflow: auto;
	}
	
	.search-tools {
		height: 49px;
		display: flex;
		justify-content: space-between;
		padding: 0 8px;
	}
	
	.search-right {
		display: flex;
	}
	
	.search-tabs {
		height: 33px;
		display: flex;
		align-items: center;
		margin-right: 40px;
	}
	

	
	.waterQuaAssessment {
		.div-wrapper {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			width: 100%;
		}
		.chartDiv {
			//margin-right: 1%;
			float: left;
			width: 61%;
			margin-right: 15px;
			height: 500px;
			padding-top: 30px;
			border: 1px solid #E5E5E5;
			box-sizing: border-box;
		}
		.tableDiv {
			display: inline-block;
			flex: 1;
			//width: 37%;
			box-sizing: border-box;
			border-top: 1px solid #E5E5E5;
			.tableTitle {
				background: #E4ECFF;
				height: 80px;
				line-height: 80px;
				text-align: center;
				border-right: 1px solid #E5E5E5;
				border-left: 1px solid #E5E5E5;
			}
			table {
				width: 100%;
				border-collapse: collapse;
				border-left: 1px solid #E5E5E5;
				td {
					text-align: center;
					border-right: 1px solid #E5E5E5;
					border-bottom: 1px solid #E5E5E5;
					line-height: 30px;
					width: 50%
				}
			}
		}
		.tc_rule {
			color: #409EFF;
			cursor: pointer;
		}
	}
</style>